<template>
  <a-modal
    :open="visible"
    :title="`${targetStatus === 1 ? '启用' : '禁用'}音色`"
    :confirm-loading="loading"
    @ok="handleConfirm"
    @cancel="handleCancel"
    :ok-text="`确认${targetStatus === 1 ? '启用' : '禁用'}`"
    cancel-text="取消"
    :ok-type="targetStatus === 1 ? 'primary' : 'danger'"
  >
    <div class="status-content">
      <div class="status-icon">
        <component 
          :is="targetStatus === 1 ? CheckCircleOutlined : StopOutlined" 
          :style="{ color: targetStatus === 1 ? '#52c41a' : '#ff4d4f', fontSize: '24px' }"
        />
      </div>
      <div class="status-message">
        <p class="main-message">
          确定要{{ targetStatus === 1 ? '启用' : '禁用' }}音色 "{{ voiceData?.voiceName }}" 吗？
        </p>
        <p class="sub-message">
          {{ targetStatus === 1 ? '启用后用户可以使用该音色进行语音合成' : '禁用后用户将无法使用该音色' }}
        </p>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'
import { CheckCircleOutlined, StopOutlined } from '@ant-design/icons-vue'
import type { VoiceDetailVo } from '@/api/generated/data-contracts'
import { Codewin } from '@/api/generated/Codewin'
import { useAuthStore } from '@/stores'

interface Props {
  visible: boolean
  voiceData?: VoiceDetailVo | null
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}

const props = withDefaults(defineProps<Props>(), {
  voiceData: null
})

const emit = defineEmits<Emits>()

const loading = ref(false)

// API实例
const authStore = useAuthStore()
const api = new Codewin({
  baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
  securityWorker: () => ({
    headers: authStore.token ? { Authorization: `Bearer ${authStore.token}` } : {}
  })
})

// 计算目标状态（当前状态的反向）
const targetStatus = computed(() => {
  return props.voiceData?.status === 1 ? 0 : 1
})

// 确认状态切换
const handleConfirm = async () => {
  if (!props.voiceData?.id) {
    message.error('音色信息不完整')
    return
  }

  try {
    loading.value = true
    const response = await api.updateVoiceStatus(
      props.voiceData.id,
      targetStatus.value
    )
    
    if (response.data?.code === 0) {
      message.success(`音色${targetStatus.value === 1 ? '启用' : '禁用'}成功`)
      emit('success')
      handleCancel()
    } else {
      message.error(response.data?.message || `音色${targetStatus.value === 1 ? '启用' : '禁用'}失败`)
    }
  } catch (error) {
    console.error('更新音色状态失败:', error)
    message.error('操作失败，请重试')
  } finally {
    loading.value = false
  }
}

// 取消操作
const handleCancel = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.status-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
}

.status-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.status-message {
  flex: 1;
}

.main-message {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}

.sub-message {
  margin: 0;
  color: #8c8c8c;
  font-size: 14px;
}
</style>